import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Detail from "./Detail";

export default class Message extends Component {
  state = {
    msgArr: [
      { id: 1, title: "message1" },
      { id: 2, title: "message2" },
      { id: 3, title: "message3" },
    ],
  };
  render() {
    const { msgArr } = this.state;
    return (
      <div>
        <ul>
          {msgArr.map((item) => {
            return (
              <li key={item.id}>
                {/* 向路由组件传递search参数 */}
                <Link to={`/home/message/detail?id=${item.id}&title=${item.title}`}>
                  {item.title}
                </Link>
              </li>
            );
          })}
        </ul>
        {/* search无需声明接收，正常注册路由参数 */}
        <Route path="/home/message/detail" component={Detail} />
      </div>
    );
  }
}
